<template>
  <el-dialog :title="title || '日志'" :visible.sync="visible" width="width:600px" append-to-body>
    <div class="radio" v-if="reverseVisible">显示方式：
      <el-radio-group v-model="reverse">
        <el-radio :label="true">倒序</el-radio>
        <el-radio :label="false">正序</el-radio>
      </el-radio-group>
    </div>
    <slot name="head"></slot>
    <el-timeline :reverse="reverse" class="mt-20" v-if="logList && logList.length">
      <el-timeline-item v-for="(item, index) in logList" :key="index" :icon="item.icon" :type="item.InstanceType"
        :color="item.color" :size="item.size">
        <el-card class="card">
          <span class="log-index">{{ index + 1 }}</span>
          <h5>{{ item.operator }}</h5>
          <h4 v-html="item[ (config && config.contentKey) || 'action']"></h4>
          <p>{{item.createTime}}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <XmEmpty v-if="!logList || !logList.length"></XmEmpty>
  </el-dialog>
</template>

<script>
import {
  getOrderOperateLog, // 订单日志
} from '@/api/pending'
export default {
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    title: {},
    reverseVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false,
      reverse: false,
      logList: []
    };
  },
  methods: {
    show({ orderId }) {
      this.visible = true
      this.getOrderOperateLog(orderId)
    },
    showByLogList({ logList }) {
      this.visible = true
      this.logList = logList
    },
    hide() {
      this.visible = false
    },
    getOrderOperateLog(orderId) {
      getOrderOperateLog({
        orderId: orderId
      }).then(res => {
        // 订单日志
        this.logList = res.data.data || [];
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .red {
  color: #ff0000;
}
.card {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  width: 90%;
  position: relative;
  .log-index {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #999;
  }
}
</style>